<template>
	<view class="container">
		<view class="header">
			<uni-icons 
				type="arrowleft" 
				size="24" 
				color="#333" 
				@click="goBack"
			></uni-icons>
			<text class="title">零食详情</text>
			<view style="width: 24px;"></view>
		</view>
		
		<scroll-view class="content" scroll-y>
			<view class="snack-detail">
				<!-- 图片展示 -->
				<image 
					:src="snackData.image_url || '/static/default-snack.png'" 
					class="detail-image"
					mode="aspectFill"
				></image>
				
				<!-- 基本信息 -->
				<view class="info-section">
					<view class="info-header">
						<text class="name">{{ snackData.name }}</text>
						<text class="price">¥{{ snackData.price }}</text>
					</view>
					
					<view class="info-meta">
						<text class="category">{{ snackData.category_name }}</text>
						<text class="status" :class="{'active': snackData.status, 'inactive': !snackData.status}">
							{{ snackData.status ? '在售' : '下架' }}
						</text>
					</view>
					
					<view class="info-row">
						<text class="label">成本价:</text>
						<text class="value">¥{{ snackData.cost_price || '未设置' }}</text>
					</view>
					
					<view class="info-row">
						<text class="label">利润率:</text>
						<text class="value">{{ profitMargin }}%</text>
					</view>
					
					<view class="info-row">
						<text class="label">创建时间:</text>
						<text class="value">{{ formatDate(snackData.created_at) }}</text>
					</view>
					
					<view class="info-row">
						<text class="label">更新时间:</text>
						<text class="value">{{ formatDate(snackData.updated_at) }}</text>
					</view>
				</view>
				
				<!-- 描述 -->
				<view class="desc-section" v-if="snackData.description">
					<text class="section-title">商品描述</text>
					<text class="desc-content">{{ snackData.description }}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 操作按钮 -->
		<view class="action-btns">
			<button class="edit-btn" @click="editSnack">编辑</button>
			<button class="delete-btn" @click="confirmDelete">删除</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				snackId: null,
				snackData: {
					name: '',
					category_id: '',
					category_name: '',
					price: 0,
					cost_price: 0,
					description: '',
					image_url: '',
					status: 1,
					created_at: '',
					updated_at: ''
				}
			}
		},
		computed: {
			profitMargin() {
				if (!this.snackData.cost_price || this.snackData.cost_price <= 0) {
					return '--';
				}
				const profit = this.snackData.price - this.snackData.cost_price;
				const margin = (profit / this.snackData.cost_price * 100).toFixed(2);
				return margin;
			}
		},
		onLoad(options) {
			this.snackId = options.id;
			this.fetchSnackData();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			fetchSnackData() {
				// 模拟API调用获取数据
				setTimeout(() => {
					// 示例数据
					this.snackData = {
						id: 1,
						name: '薯片',
						category_id: 2,
						category_name: '膨化食品',
						price: 5.50,
						cost_price: 3.20,
						description: '香脆可口，多种口味可选。精选优质马铃薯，采用传统工艺制作，保留食材原味。适合各种场合食用，是休闲娱乐的好伴侣。',
						image_url: '/static/snacks/chips.jpg',
						status: 1,
						created_at: '2023-01-15 10:30:00',
						updated_at: '2023-01-20 14:15:00'
					};
				}, 500);
			},
			formatDate(dateStr) {
				if (!dateStr) return '--';
				const date = new Date(dateStr);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			editSnack() {
				uni.navigateTo({
					url: `/pages/snake/edit?id=${this.snackId}`
				});
			},
			confirmDelete() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个零食吗？此操作不可撤销',
					success: (res) => {
						if (res.confirm) {
							this.deleteSnack();
						}
					}
				});
			},
			deleteSnack() {
				// 模拟API调用
				setTimeout(() => {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 800);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f7fa;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		
		.title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
	}
	
	.content {
		flex: 1;
		padding: 15px;
	}
	
	.snack-detail {
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	}
	
	.detail-image {
		width: 100%;
		height: 250px;
		object-fit: cover;
	}
	
	.info-section {
		padding: 20px;
	}
	
	.info-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		
		.name {
			font-size: 20px;
			font-weight: bold;
			color: #333;
		}
		
		.price {
			font-size: 20px;
			font-weight: bold;
			color: #ff5a5f;
		}
	}
	
	.info-meta {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		
		.category {
			font-size: 14px;
			color: #666;
			background-color: #f5f7fa;
			padding: 4px 12px;
			border-radius: 12px;
			margin-right: 10px;
		}
		
		.status {
			font-size: 14px;
			padding: 4px 12px;
			border-radius: 12px;
			
			&.active {
				background-color: #e6f7e6;
				color: #52c41a;
			}
			
			&.inactive {
				background-color: #fff1f0;
				color: #ff4d4f;
			}
		}
	}
	
	.info-row {
		display: flex;
		justify-content: space-between;
		padding: 8px 0;
		border-bottom: 1px solid #f0f0f0;
		
		.label {
			font-size: 14px;
			color: #888;
		}
		
		.value {
			font-size: 14px;
			color: #333;
			font-weight: 500;
		}
	}
	
	.desc-section {
		padding: 20px;
		border-top: 1px solid #f0f0f0;
		
		.section-title {
			display: block;
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 10px;
		}
		
		.desc-content {
			font-size: 14px;
			color: #666;
			line-height: 1.6;
		}
	}
	
	.action-btns {
		display: flex;
		padding: 15px;
		background-color: #fff;
		border-top: 1px solid #eee;
		
		button {
			flex: 1;
			height: 45px;
			line-height: 45px;
			font-size: 16px;
			border-radius: 25px;
			
			&.edit-btn {
				background: linear-gradient(135deg, #4a8fe7, #6a5acd);
				color: white;
				border: none;
				margin-right: 10px;
				box-shadow: 0 4px 12px rgba(74, 143, 231, 0.3);
			}
			
			&.delete-btn {
				background: #fff;
				color: #ff5a5f;
				border: 1px solid #ff5a5f;
				margin-left: 10px;
			}
		}
	}
	
	@media (min-width: 768px) {
		.content {
			padding: 30px;
		}
		
		.snack-detail {
			max-width: 600px;
			margin: 0 auto;
		}
	}
</style>